import React, { Component, Fragment } from 'react'
import { Link } from 'react-router-dom'
import '../components/style.css'
import { connect } from "react-redux";
import { actionCreators } from '../store'
class HomeList extends Component {

    render() {
        let { getMoreList } = this.props;
        return (<Fragment>
            <ul className="Textul">
                {this.setLi()}
            </ul>
            <button className="moreBtn" onClick={getMoreList}>更多</button>
        </Fragment>)
    }

    setLi() {
        return this.props.textData.map((i, index) => {
            let c = ""
            if (!i.img) {
                c = "rwli"
            }
            console.log(111,i)
            return (
                <Link to={'/detail/'+i.id} key={index}>
                    <li className={c} >
                        <div className="fl-p">
                            <p className="p1">{i.text}</p>
                            <p className="p2">{i.intro}</p>
                        </div>
                        <div className="fr-img">
                            <img alt="" src={i.img} />
                        </div>
                    </li></Link>
            )
        })
    }
}
const mapStateToProps = (state, ownProps) => {
    return {
        textData: state.get("home").get("textData").toJS()
    }
}
const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        getMoreList() {
            console.log("woei")
            dispatch(actionCreators.getMoreList())
        }

    }
}
export default connect(mapStateToProps, mapDispatchToProps)(HomeList) 